<template>
  <el-container>
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="" />
        <span>扶贫助农平台</span>
      </div>
      <el-menu background-color="#27272e" 
      text-color="#fff" 
      active-text-color="#fff"  
      :default-active="indexpath" 
      mode="horizontal" router>
        <el-menu-item
          v-for="(item,i) in navList"
          :key="i"
          :index="item.router"
        >
          <template slot="title">
            <span>{{ item.title }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { title: "首页", router: "/hindex" },
        { title: "贫困户", router: "/pinkunview" },
        { title: "扶农政策", router: "/fupinview" },
        { title: "志愿者", router: "/zhiyuanview" },
        { title: "留言反馈", router: "/liuyan" },
        { title: "个人中心", router: "/userview" },
        { title: "后台管理", router: "/login" },
      ],
      indexpath:''
    };
  },
  methods: {
    
  },
  watch: {
    "$route.path":function(){
      // window.console.log('run watch!');
      // window.console.log(this.$route.path.split('/')[1])
      this.indexpath="/"+this.$route.path.split('/')[1];
    }
  },
  created(){
    // window.console.log(this.$route.path.split('/')[1]);
    this.indexpath="/"+this.$route.path.split('/')[1]; 
  }
 
};
</script>
<style scoped lang="scss">
.el-header {
  //   border: 1px solid red;
  display: flex;
  justify-content: space-between;
  background-color: #27272e;

  div {
    img {
      width: 50px;
      padding: 5px;
    }
    color: whitesmoke;
    font-size: 30px;
    display: flex;
    align-items: center;
  }
}
.el-main{
  padding: 0;
}
</style>